<template>
  <div>
    <a-button @click="visible = true" :status="'danger'"> {{ t["清空"] }} </a-button>
    <a-modal :title="t['警告']" :footer="false" width="700px" v-model:visible="visible">
      <a-card class="h-[400px] w-[100%]" :body-style="{ height: '100%' }">
        <div class="w-full h-full flex justify-center items-center flex-col">
          <div>
            <img src="./warn.png" width="120" alt="" />
          </div>
          <div class="text-orange-600">
            {{ t["将会删除所有商品"] }}
            <span class="text-[1rem] text-red-500" v-if="cutdown !== 0"> [{{ cutdown }}] </span>
          </div>

          <div class="flex mt-3" v-if="cutdown === 0">
            <a-input-password v-model="password" :placeholder="t['请输入密码']"></a-input-password>
            <a-button type="primary" :disabled="!password" @click="confirm">
              {{ t["确定"] }}
            </a-button>
          </div>
        </div>
      </a-card>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { clearProduction } from "@/api/service/goods/goods";
import { Message } from "@arco-design/web-vue";

const t = translate("公共模块");
const visible = ref(false);

const emit = defineEmits(["confirm"]);
const password = ref("");
const cutdown = ref(5);

const confirm = async () => {
  const data = await clearProduction(password.value);
  Message.info(data.msg);
  password.value = "";
  visible.value = false;
  emit("confirm");
};
watch(visible, () => {
  if (visible.value) {
    let clear = setInterval(() => {
      if (cutdown.value <= 0) {
        clearTimeout(clear);
        return;
      }
      cutdown.value--;
    }, 1000);
  } else {
    cutdown.value = 5;
  }
});
</script>

<style lang="scss" scoped></style>
